<template>
    <NavBar></NavBar>
    <ContentField>
     <h2 style="text-align:center;margin-bottom: 20px;">添加学生到{{classId}}班</h2>

       <table class="table table-secondary table-hover" style="margin-top:20px;">
            <thead class="table-info text-center">
                <tr>
                    <th>序号</th>
                    <th scope="col">id</th>
                    <th scope="col">学生id(studentId)</th>
                    <th scope="col">学生姓名(name)</th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody class="text-center">
              <tr v-for="(stu, index) in students" :key="stu.id">
                    <th>{{ index + 1 }}</th>
                    <td>{{ stu.id }}</td>
                    <td>{{ stu.studentId }}</td>
                    <td>{{ stu.name }}</td>
                    <td>
                        <button class="btn btn-sm btn-primary" style="margin:5px;" @click="addToClass(stu.studentId, classId)">添加</button>
                    </td>
              </tr>
            </tbody>
        </table>

        <PageNav :isFirstPage="isFirstPage" :isLastPage="isLastPage" :prePage="prePage" :nextPage="nextPage" :pageSize="pageSize" :pageNum="pageNum" :totalPage="totalPage" @getPage="getPage">
        </PageNav>
    </ContentField>
 </template>
 

 <script>
 
 import NavBar from "@/components/teacher/NavBar.vue";
 import ContentField from '@/components/commons/ContentField.vue';
 import PageNav from '@/components/commons/PageNav.vue';
 import {useStore} from 'vuex';
 import {useRoute} from 'vue-router';
 import {ref} from 'vue';
 import $ from 'jquery';

 export default{
     name: 'addPro',
     components: {
         NavBar,
         ContentField,
         PageNav,
     },
     setup(){
        
        const store = useStore();
        const route = useRoute();
        let students = ref([]);
        let classId = route.params.classId;
        let error_message = ref('');

        let PageNum = 1 ;  //当前页数
        let PageSize = 6 ; //每页数据条数
        let pageNum = ref('');  //当前页数  变量  用于前端渲染
        let pageSize = ref('');  //每页数据条数  变量  用于前端渲染
        let totalNum = ref('');  //总条数
        let totalPage = ref(''); //总页数
        let isFirstPage = ref('');  //是否为第一页
        let isLastPage = ref('');  //是否为最后一页
        let nextPage = ref("");  //下一页
        let prePage = ref("");   //前一页


        pageSize.value = 1;
        pageNum.value = 5;
        totalPage.value = 3;
        isFirstPage.value = true;
        isLastPage.value = false;
        nextPage.value = 2;
        prePage.value = 1;

        const updatePageInfo = (pageNum,pageSize)=>{  //更新当前页数和每页大小
            PageNum = pageNum.value;
            PageSize = pageSize.value;
        }

        const getPage = (PageNum,PageSize)=>{   //按页查询用户信息

            $.ajax({
            url: 'http://localhost:8090/sls/teacher/pageInfoWithoutClass/' + PageNum +'/' + PageSize ,
            type: "get",
            headers: {
                Authorization: "Bearer " +store.state.user.token,
            },
            success(resp){
                console.log(resp);

                students.value = resp.list; //获取所有学生信息
                totalNum.value = resp.total;
                totalPage.value = resp.pages;
                pageNum.value = resp.pageNum;
                pageSize.value = resp.pageSize;
                isFirstPage.value = resp.isFirstPage;
                isLastPage.value = resp.isLastPage;
                nextPage.value = resp.nextPage;
                prePage.value = resp.prePage;

                updatePageInfo(pageNum, pageSize); 
                
            },
            error(resp){
                console.log(resp);
            }
            });
        }

        const addToClass = (studentId, cId) => {
            // console.log("studentId: ");
            // console.log(studentId);
            // console.log("cId: ");
            // console.log(cId);
            $.ajax({
                url: 'http://localhost:8090/sls/teacher/updateCIdBySId' ,
                type: "post",
                data: {
                    studentId: studentId,
                          cId: cId,
                },
                headers: {
                    Authorization: "Bearer " +store.state.user.token,
                }, 
                success(resp){
                    if(resp.error_message === "success"){
                        console.log(resp);
                        getPage(PageNum, PageSize);  //如果，添加成功，则刷新页面数据
                    }
                    else{
                        error_message.value = resp.error_message;
                        alert(error_message.value);
                        console.log(resp);
                    }
                },
                error(resp){
                    console.log(resp);
                }
            });

        }
    
        return{
            getPage,
            updatePageInfo,
            addToClass,
            error_message,
            students,
            classId,

            PageNum,
            PageSize,
            pageNum,
            pageSize,
            totalNum,
            totalPage,
            isFirstPage,
            isLastPage,
            nextPage,
            prePage,
        }
     }

 }
 
 </script>
 
 
 
 <style scoped>
 </style>